<template>
    <div class="box-login">
        <h3>叩叮狼商品管理系统</h3>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="0" class="demo-ruleForm">
            <el-form-item prop="username">
                <el-input v-model="ruleForm.username" type="text" autocomplete="off" size="large" placeholder="请输入用户名"
                    :prefix-icon="Avatar" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" :prefix-icon="Lock"
                    size="large" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import { Lock, Avatar } from '@element-plus/icons-vue'
import { user } from "@/api/index"
import { useRouter } from "vue-router"
import { useUserStore } from "../store/user"
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const userStore = useUserStore()


const username = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('用户名不能为空'))
    } else {
        callback()
    }
}
const password = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: '',
})

const rules = reactive({
    username: [{ validator: username, trigger: 'blur' }],
    password: [{ validator: password, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (!valid) return false
        user.LoginApi(ruleForm).then(res => {
            console.log(res);
            if (res.code === 200) {
                localStorage.setItem("token", res.data.tokenHead + res.data.token)
                ElMessage.success("登录成功")
                router.push("/index")

            }
        })


    })
}






const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style  lang="less" scoped>
.box-login {
    width: 400px;
    margin: 0 auto;

    text-align: center;

    h3 {
        margin-top: 300px;
    }

    :deep(.el-input__wrapper) {
        background-color: transparent;
    }

    :deep(.el-input_inner) {
        color: #fff;
    }
}

.el-button {
    width: 100%;
}
</style>